<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="title"
    width="85%"
    @close="cancel"
    @opened="initPaneData"
  >
    <div class="app-container">
      <el-button v-if="itemStatus == 3" type="primary" size="mini" icon="el-icon-refresh-left" round @click="reflush">刷新</el-button>
      <el-button v-if="itemStatus == 2" size="mini" type="primary" icon="el-icon-monitor" round @click="doValidate">校验</el-button>
      <div class="head-container">
        <activeStep v-if="showActiveSetp" ref="activeStep" :parent="iparent" />
        <typeStep v-if="showTypeStep" ref="typeStep" :parent="iparent" />
      </div>
      <div class="head-container">
        <template v-if="showBuyer">
          <span>采购ID:</span>
          <span>
            <el-select v-model="buyerId" style="width: 280px;">
              <el-option v-for="bid in buyerList" :key="bid" :label="bid" :value="bid" />
            </el-select>
          </span>
        </template>
        <el-button size="mini" type="primary" style="float:right;" round @click="doSubmit">保存</el-button>
      </div>
      <div style="padding-top:25px">
        <!--<el-popover
          v-if="itemInfo.errorMsg"
          placement="bottom"
          title="校验信息"
          trigger="click"
        >
          <div style="height:400px;overflow:auto;">
            <div v-for="(msg,index) in JSON.parse(itemInfo.errorMsg)" :key="index" :index="index">
              <span>{{ (index + 1) + '.' + msg }}</span>
            </div>
          </div>
          <el-button slot="reference" size="mini" type="danger">点我查看校验信息</el-button>
        </el-popover>-->
        <validateMsg ref="validateMsg" :item="itemInfo" :type="2" />
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="inputSheet" name="inputSheet">
            <inputSheetForm ref="inputSheetForm" :parent="iparent" />
          </el-tab-pane>
          <el-tab-pane label="附件表" name="mps">
            <mpsFileForm ref="mpsFileForm" />
          </el-tab-pane>
          <el-tab-pane label="Price OB" name="price">
            <priceForm ref="priceForm" :iparent="iparent" />
          </el-tab-pane>
          <el-tab-pane label="IGRO Form" name="igroForm">
            <igroForm ref="igroForm" />
          </el-tab-pane>
          <el-tab-pane label="Ftag Form" name="ftagForm">
            <ftagForm ref="ftagForm" />
          </el-tab-pane>
          <el-tab-pane label="CPK&Unit" name="cpkUnit">
            <cpkAndUnitForm ref="cpkAndUnitForm" />
          </el-tab-pane>
          <el-tab-pane label="PB竞品商品信息" name="pb">
            <pbItemForm ref="pbItemForm" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import inputSheetForm from '@/views/active-item/sheet/inputSheet-active'
import priceForm from '@/views/active-item/sheet/price'
import igroForm from '@/views/new-item/sheet/igro'
import ftagForm from '@/views/new-item/sheet/ftag'
import cpkAndUnitForm from '@/views/new-item/sheet/cpkAndUnit'
import pbItemForm from '@/views/new-item/sheet/pbItem'
import mpsFileForm from '@/views/active-item/sheet/mpsFile'
import activeStep from '@/views/active-item/step/active-step'
import typeStep from '@/views/active-item/step/type-step'
import { batchValidate, get } from '@/api/active-item'
import common from '@/api/active-global'
import { save, initPanel } from '@/utils/activeItemUtil'
import validateMsg from '@/views/part/validateMsg'

export default {
  components: { inputSheetForm, priceForm, igroForm, ftagForm, cpkAndUnitForm, pbItemForm, mpsFileForm, activeStep, typeStep, validateMsg },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      itemInfo: {},
      loading: false,
      id: '',
      itemStatus: common.ITEM_STATUS_BUYER_ADD,
      iparent: this,
      title: '',
      editable: false,
      isAudit: false,
      activeName: 'inputSheet',
      detailType: 0,
      buyerId: null,
      buyerList: [],
      showBuyer: false
    }
  },
  computed: {
    showActiveSetp: function() {
      return this.parent.changeType === common.itemStatus
    },
    showTypeStep: function() {
      return this.parent.changeType === common.itemType
    },
    showValidate: function() {
      console.log('showValidate: ' + this.itemStatus)
      return this.itemStatus === common.ITEM_STATUS_AGREED
    }
  },
  methods: {
    // 保存触发
    doSubmit() {
      save(this, false)
    },
    cancel() {
      this.itemInfo = {}
      this.loading = false
      this.id = ''
      this.itemStatus = common.ITEM_STATUS_BUYER_ADD
    },
    // 校验
    doValidate() {
      this.$confirm('确认校验该item信息?', '校验数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        batchValidate({ ids: [this.id], changeType: this.parent.changeType }).then(() => {
          this.$alert('校验处理中，请稍后刷新页面进行查询。', '提交成功', {
            confirmButtonText: '确定',
            type: 'success'
          })
          get(this.id).then(res => {
            this.itemStatus = res.itemStatus
            this.loading = false
          }, (error) => {
            console.log(error)
            this.loading = false
          })
        }, (error) => {
          console.log(error)
          this.loading = false
        })
      })
    },
    reflush() {
      this.loading = false
      get(this.id).then(res => {
        this.itemStatus = res.itemStatus
        this.itemInfo = JSON.parse(res.itemInfo)
        this.initPaneData()
        this.parent.init()
      }, (error) => {
        console.log(error)
        this.loading = false
      })
    },
    // 初始化加载
    initPaneData() {
      initPanel(this)
    }
  }
}
</script>

